// import { Image } from 'antd';
import { useQuery } from '@umijs/max';
// import { useEffect } from 'react';
import styles from './index.module.less';
// 公共函数
import '@/utils/adapter.min.js';
import { WebRtcStreamer } from '@/utils/webRtcStreamer';
// 接口
import { getIpList } from '@/services/data-board/boardOne';
// 组件
// import DPlayerComponent from '@/components/DPlayerComponent';
// 图片
// import Img1 from '@/assets/images/l1.png';
// import Img2 from '@/assets/images/l2.png';
// import Img3 from '@/assets/images/r1.png';
// import Img4 from '@/assets/images/r2.png';
// import videoUrl from '@/assets/video/video.mp4';

let webRtcServer = null;
let ipName1 = '';
let ipName2 = '';
let ipName3 = '';
let ipName4 = '';

export default function DataBoardThree() {
  // 获取视频ip地址
  const { data: ipData, isSuccess: ipIsSuccess } = useQuery({
    queryKey: ['getIpList'],
    queryFn: () => getIpList({ type: 4 }),
    refetchInterval: false,
  });
  console.log('ipIsSuccess', ipIsSuccess);
  if (ipIsSuccess) {
    const { resultData } = ipData;
    const ipAddress1 = resultData?.[0]?.ipAddress;
    ipName1 = resultData?.[0]?.name;
    const ipAddress2 = resultData?.[1]?.ipAddress;
    ipName2 = resultData?.[1]?.name;
    const ipAddress3 = resultData?.[2]?.ipAddress;
    ipName3 = resultData?.[2]?.name;
    const ipAddress4 = resultData?.[3]?.ipAddress;
    ipName4 = resultData?.[3]?.name;
    console.log('ipAddress', ipAddress1, ipAddress2, ipAddress3, ipAddress4);
    const IpPath = process.env.VIDEO_URL ? process.env.VIDEO_URL : '';
    webRtcServer = new WebRtcStreamer('video1', IpPath);
    webRtcServer.connect(`rtsp://admin:zhuhai12@${ipAddress1}`, '', '', '');

    webRtcServer = new WebRtcStreamer('video2', IpPath);
    webRtcServer.connect(`rtsp://admin:zhuhai12@${ipAddress2}`, '', '', '');

    webRtcServer = new WebRtcStreamer('video3', IpPath);
    webRtcServer.connect(`rtsp://admin:zhuhai12@${ipAddress3}`, '', '', '');

    webRtcServer = new WebRtcStreamer('video4', IpPath);
    webRtcServer.connect(`rtsp://admin:zhuhai12@${ipAddress4}`, '', '', '');
    // webRtcServer.connect('rtsp://admin:zhuhai12@192.168.1.107', '', '', '');
  }

  return (
    <div className={styles['main-wrapper']}>
      <div className={styles['main']}>
        <div className={styles['main-left-box']}>
          <div className={styles['left-title']}>{ipName1}</div>
          <div className={styles['main-img']}>
            {/* <DPlayerComponent url={videoUrl1} cover={Img1} /> */}
            <video
              muted
              autoPlay
              id="video1"
              style={{ width: '100%', height: '100%', objectFit: 'fill' }}
            >
              您的浏览器不支持 video 标签。
            </video>
          </div>
        </div>
        <div className={styles['main-left-box']}>
          <div className={styles['left-title']}>{ipName2}</div>
          <div className={styles['main-img']}>
            {/* <DPlayerComponent url={videoUrl2} cover={Img2} /> */}
            <video
              muted
              autoPlay
              id="video2"
              style={{ width: '100%', height: '100%', objectFit: 'fill' }}
            >
              您的浏览器不支持 video 标签。
            </video>
          </div>
        </div>
      </div>
      <div className={styles['main']}>
        <div className={styles['main-right-box']}>
          <div className={styles['right-title']}>{ipName3}</div>
          <div className={styles['main-img']}>
            {/* <DPlayerComponent url={videoUrl3} cover={Img3} /> */}
            <video
              muted
              autoPlay
              id="video3"
              style={{ width: '100%', height: '100%', objectFit: 'fill' }}
            >
              您的浏览器不支持 video 标签。
            </video>
          </div>
        </div>
        <div className={styles['main-right-box']}>
          <div className={styles['right-title']}>{ipName4}</div>
          <div className={styles['main-img']}>
            {/* <DPlayerComponent url={videoUrl4} cover={Img4} /> */}
            <video
              muted
              autoPlay
              id="video4"
              style={{ width: '100%', height: '100%', objectFit: 'fill' }}
            >
              您的浏览器不支持 video 标签。
            </video>
          </div>
        </div>
      </div>
    </div>
  );
}
